/**
 * React.memo()
 *
 *    概念：
 *        实现缓存组件，类似类组件中 PureComponent 基类的工作，阻止组件的无用Render从而优化性能
 *
 *    语法：
 *      const NewComponent = memo(函数组件)
 */

import { memo } from "react";
import useCount from "./hooks/useCount";

const Hello = memo(() => {
  console.log("Hello Render");
  return <h4>Hello</h4>;
});

export default function App() {
  console.log("App Render");
  const { count, increment } = useCount();

  return (
    <div>
      <h1>App</h1>

      <hr />
      <button onClick={() => increment()}>{count}</button>
      <hr />

      <Hello />
    </div>
  );
}
